<template>
  <div ref="sliderContainer" @mousemove="onMouseMove" @mouseup="onMouseUp" @touchmove="onTouchMove"
    @touchend="onMouseUp" class="slider-code-container">
    <span v-if="status === 0">请按住滑块，拖动到最右边</span>
    <div @mousedown="onMouseDown" @touchstart="onTouchStart" :style="{ left: left }" class="slider-code-btn">
      <el-icon :size="16" :color="'#909399'">
        <DArrowRight />
      </el-icon>
    </div>
    <div :style="{ width: left }" class="slider-code-complete">
      <span v-if="status === 2">验证成功</span>
    </div>
  </div>
</template>
<script setup>
  import { ref, defineEmits } from "vue";
  const emit = defineEmits(["success"]);
  const left = ref('0');
  const status = ref(0);
  const start = ref(0);
  const sliderContainer = ref();
  const onMouseDown = (e) => {
    if (status.value !== 2) {
      left.value = '0';
      status.value = 1;
      start.value = {
        clientX: e.clientX,
      };
    } else {
      left.value = '0';
      status.value = 0;
    }
  };
  const onTouchStart = (e) => {
    if (status.value !== 2) {
      left.value = '0';
      status.value = 1;
      start.value = {
        clientX: e.changedTouches[0].clientX,
      };
    } else {
      left.value = '0';
      status.value = 0;
    }
  }
  const onMouseMove = (e) => {
    const containerWidth = sliderContainer.value.clientWidth
    if (status.value === 1) {
      let width = e.clientX - start.value.clientX;
      if (width + 40 > containerWidth) {
        left.value = containerWidth - 40 + "px";
        status.value = 2;
        emit("success", false);
      } else if (width < 0) {
        status.value = 1
      } else {
        left.value = width + "px";
      }
    }
  };
  const onTouchMove = (e) => {
    const containerWidth = sliderContainer.value.clientWidth
    if (status.value === 1) {
      let width = e.changedTouches[0].clientX - start.value.clientX;
      if (width + 40 > containerWidth) {
        left.value = containerWidth - 40 + "px";
        status.value = 2;
        emit("success", false);
      } else if (width < 0) {
        status.value = 1
      } else {
        left.value = width + "px";
      }
    }
  };
  const onMouseUp = (e) => {
    if (status.value !== 2) {
      left.value = '0';
      status.value = 0;
      emit("success", true);
    }
  };
  const initSlider = () => {
    left.value = '0';
    status.value = 0;
  }

  defineExpose({ initSlider })
</script>
<style lang="scss" scoped>
  .slider-code-container {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    background-color: #F0F2F5;
    position: relative;
    text-align: center;
    color: #606266;
    line-height: 40px;
    user-select: none;
  }

  .slider-code-btn {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
  }

  .slider-code-complete {
    width: 0;
    height: 40px;
    color: #ffffff;
    border-radius: 4px 0 0 4px;
    background-color: #409EFE;
    position: absolute;
    left: 0;
    top: 0;
  }
</style>